import QtQuick 2.2

Canvas {
    width: 400
    height: 200
    contextType: "2d"
    id: root

    Path {
        id: myPath
        startX: 4
        startY: 100

        PathCurve {
            x: 75
            y: 75
        }
        PathCurve {
            x: 200
            y: 150
        }
        PathCurve {
            x: 325
            y: 25
        }
        PathCurve {
            x: 394
            y: 100
        }
    }

    Path {
        id: arcPath
        startX: 0
        startY: 100
        PathArc {
            x: 100
            y: 200
            radiusX: 100
            radiusY: 100
            direction: PathArc.Clockwise
            useLargeArc: true
        }
    }

    Path {
        id: pathAttr
        startX: 10
        startY: 100
//        PathAttribute { name: "zOrder"; value: 0;}
//        PathAttribute { name: "itemAlpha"; value: 0.1;}
//        PathAttribute { name: "itemScale"; value: 0.6;}
        PathLine {
            x: root.width/2-40
            y: 100
        }
//        PathAttribute { name: "zOrder"; value: 10;}
//        PathAttribute { name: "itemAlpha"; value: 0.8;}
//        PathAttribute { name: "itemScale"; value: 1.2;}
        PathLine {
            relativeX: root.width/2-60
            relativeY: 0
        }
//        PathAttribute { name: "zOrder"; value: 0;}
//        PathAttribute { name: "itemAlpha"; value: 0.1;}
//        PathAttribute { name: "itemScale"; value: 0.6;}
    }

    Path {
        id: percentPath
        startX: 10
        startY: 100
        PathLine {
            x: root.width/2 - 40
            y: 100
        }
        PathPercent { value: 0.28 }
        PathLine {
            relativeX: root.width/2 - 60
            relativeY: 0;
        }
    }

    onPaint: {
        context.strokeStyle = Qt.rgba(.4,.6,.8)
        context.path = myPath
        context.stroke();
        context.strokeStyle = Qt.rgba(.2,.4,.6)
        context.path = arcPath
        context.stroke();
        context.strokeStyle = "red"
        context.path = pathAttr
        context.stroke();
//        context.strokeStyle = Qt.rgba(.7,.8,.9)
//        context.path = percentPath
//        context.stroke();
    }
}

